<template>
  <div class="songInfo">
    <div class="songHeader">
      <div>
        <img :src="songHeaderInfo.coverImgUrl" alt width="200" height="200" />
      </div>
      <div>
        <div class="headerInfo">
          <div>
            <span>歌单</span>
            <span>{{songHeaderInfo.name}}</span>
          </div>
          <div>
            <img :src="songHeaderInfo.avatarUrl" alt srcset width="25" height="25" />
            <span>{{songHeaderInfo.nickname}}</span>
            <span>{{songHeaderInfo.createTime}}创建</span>
          </div>
          <div>全部播放</div>
          <div>
            标签:
            <span>{{songHeaderInfo.tags?.join("/")}}</span>
          </div>
          <div>
            歌曲数:
            <span>{{songHeaderInfo.trackCount}}</span>
            播放数:
            <span>{{songHeaderInfo.playCount}}</span>
          </div>
          <div>
            简介:
            <span>{{songHeaderInfo.description}}</span>
          </div>
        </div>
      </div>
    </div>
    <song-detail></song-detail>
  </div>
</template>

<script lang="ts" setup>
import songDetail from './songDetail.vue'
import { onMounted, ref } from 'vue'
import axios from '@/http'
import { useRoute } from 'vue-router'
onMounted(() => {
  getSongDetail()
})
const route = useRoute()
const songHeaderInfo = ref({})
const getSongDetail = () => {
  axios
    .get('/playlist/detail', {
      params: {
        id: route.params.id
      }
    })
    .then(res => {
      const { playlist } = res.data
      songHeaderInfo.value = { ...playlist.creator, ...playlist }
      console.log(res)
    })
}
</script>

<style lang="scss" scoped>
.songInfo {
  color: #fff;
  padding: 12px 36px;
  .songHeader {
    display: flex;
    div {
      margin: 2px 0;
      img {
        border-radius: 8px;
      }
      .headerInfo {
        margin-left: 48px;
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
        div:nth-child(1) {
          font-size: 20px;
          font-weight: bolder;
          color: #b2b2b2;
          display: flex;
          align-items: center;
          span:nth-child(1) {
            font-size: 12px;
            color: #c3473a;
            border: 1px solid #834831;
            padding: 1px 4px;
            border-radius: 5px;
            margin-right: 8px;
          }
        }
        div:nth-child(2) {
          font-size: 13px;
          img {
            border-radius: 50%;
            vertical-align: middle;
          }
          span {
            color: #90b8e2;
            margin: 0 8px;
            &:nth-child(3) {
              color: #878787;
            }
          }
        }
        div:nth-child(3) {
          margin: 12px 0 6px;
          text-align: center;
          width: 100px;
          color: #fff;
          font-size: 14px;
          background-color: #c3473a;
          padding: 6px 11px;
          border-radius: 29px;
        }
        div:nth-child(4) {
          font-size: 13px;
          color: #b2b2b2;
          span {
            color: #90b8e2;
          }
        }
        div:nth-child(5) {
          font-size: 13px;
          color: #b2b2b2;
          span {
            color: #878787;
            margin: 0 10px 0 3px;
          }
        }
        div:nth-child(6) {
          font-size: 13px;
          color: #b2b2b2;
          span {
            color: #878787;
          }
        }
      }
    }
  }
}
</style>